<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue js</title>
    <style>
        .completed {
            text-decoration: line-through;
        }

        .something {
            color: red;
        }
    </style>
</head>

<body>

<div class="container">
    <div id="app">
        <task-app :list="tasks"></task-app>
    </div>
</div>
<template id="task-template">
    <ul>
        <li v-for="task in list">
            {{ task.id }} | {{ task.author }} | {{ task.name }} | {{ task.price }}
        </li>
    </ul>
</template>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.js"></script>

<script>
    Vue.component('task-app', {//要应用的标签
        template: '#task-template',//模板id
        props: ['list']//请求的json
    })
</script>
<script>
    var demo = new Vue({
        el: '#app',
        data: {
            tasks: '' //为空，可以是null
        },
        mounted: function () {
           this.getCustomers()
        },
        methods: {
            getCustomers: function () {
                this.$http.get('/jsondata', {params:{ id:"11",tname:"33"}}, {
//                    headers: {
//                        "X-Requested-With": "XMLHttpRequest"
//                    },
//                    emulateJSON: true
                }).then(function (response) {
                    console.log(response.data)
                    this.tasks=JSON.parse(response.data);
                    console.log(this.$data.tasks)
                }, function (response) {
                    // handle error
                });
            }


        }
    })
</script>
</body>

</html>

